<template>
	<view class="waterfall-item" @tap.stop="onTap">
		<u-popup height="45%" :show="show" mode="bottom" :closeable="true" borderRadius="15" :round="true" :closeOnClickOverlay='false'
			@close="close()">
			<cart v-if="show" :productInfo="AttrList" :params='params' :isBuy="false" :cartNum="1" :addBuyCart="addBuyCart"
				:addCart="addCart" />
		</u-popup>
		<view style="position: relative;">
			<image class="image" :src="params.image" mode="widthFix" ></image>
			<view v-if="statue">
				<view v-if="params.border!=''">
					<image :src="params.border" mode="" style="position: absolute; width: 100%; height: 100%;top: 0;border-radius: 15rpx 15rpx 0 0;display:block;"></image>
				</view>
				<view v-else>
					<image :src="bg" mode="" v-if="bg!=''&&ids.includes(params.id)" style="position: absolute; width: 100%; height: 100%;top: 0;border-radius: 15rpx 15rpx 0 0;display:block;"></image>
				</view>
			</view>
		</view>
		<view class="content">
			<view style="padding: 10rpx;">
				<view class="u-line-2 u-font-30 wm_weight_flod">{{params.storeName}}</view>

				<view v-if="params.levelList!=null" class="u-flex u-col u-col-center u-flex-wrap">

					<view v-for="(item,index) in params.levelList" :key="index" class="text">
						{{item}}
					</view>
				</view>
				<view class="money">
					<view class=" width_100 u-flex" :style="{color:color,fontSize:size+'rpx'}"
						style="line-height: 45rpx;justify-content: space-between;">
						<view class="u-flex u-row-left" v-if="params.price>0">
							<view>￥{{params.price}}</view>
							<view v-if="on && isMultiple && params.price!=params.maxPrice">{{' '}} ~
								{{params.maxPrice}}
							</view>
							
						</view>
						
						<!-- <view v-if="info.costPrice>0"
							style="font-size: 28rpx;color: #a69999;text-decoration: line-through;margin-left: 10rpx;margin-top: 10rpx;">
							¥{{info.costPrice}}</view> -->
						<view class=" u-flex u-row-left integral" v-if="params.integral>0 && params.isIntegral==1">+
							{{params.integral}}积分<text
								v-if="on && isMultiple && params.integral!=params.maxIntegral">{{' '}} ~
								{{params.maxIntegral}}积分</text>
						</view>
						<!-- <view v-else style="padding: 10rpx;background-color: #fff;border-radius: 30rpx;" @click.stop="getAttrList(params.id,params.type)">
							<image src="../../static/images/pageCart.png" mode="widthFix" style="width: 40rpx;"></image>
						</view> -->
					</view>
				</view>
				
				<view class="u-flex u-row-between">
					<view style="font-size: 26rpx;text-decoration: line-through;color: #a5a5a5;">
						￥{{params.costPrice}}</view>
					<view class="sales">
						销量:{{params.sales+params.virtualSales}}{{params.unit}}
					</view>
					
				</view>
				<view style="margin-top: 10rpx;" class="" v-if="params.explain">
					<text style="color: #820aaa;line-height: 36rpx;font-size: 25rpx;">
						{{params.explain}}
					</text>
				</view>
			</view>
			<!-- <view class="shop-name">{{params.shop}}</view> -->
			
		</view>
	</view>
</template>

<script>
	let that;
	import {
		addCart,
		countCart,
		getAttrList
	} from '@/api/storeProductCart.js'
	import priceStyle from '@/pages/sub/store/category/item.vue'
	import cart from '@/components/pageCart.vue'
	export default {
		name: "helang-waterfall",
		components: {
			priceStyle,
			cart
		},
		props: {
			params: {
				type: Object,
				default () {
					return {}
				}
			},
			ids: {
				type: Array,
				default: () => []
			},
			setAShow:{
				type: Function,
				default: () => {}
			},
			statue:{
				type:Boolean,
				default:false
			},
		    getCun: {
				type: Function,
				default: () => {}
			},
			color: {
				type: String,
				default: '#F13430'
			},
			size: {
				type: Number,
				default: 30
			},
			on: {
				type: Boolean,
				default: false
			},
			tag: {
				type: String | Number,
				default: ''
			},
			index: {
				type: Number,
				default: -1
			},
			bg:{
				type:String,
				default:''
			}
		},
		data() {
			return {
               show:false,
			   AttrList:[],
			 
			};
		},
		computed: {
			isMultiple() {
				return this.params.isMultiple
			}
		},
		created(){
			console.log('11111111111111111');
			that = this
		},
		mounted(){
			const query = uni.createSelectorQuery().in(this);
			query.select('.waterfall-item').boundingClientRect(data => {
				let height = Math.floor(data.height);
				this.$emit("height", height, this.$props.tag);
			}).exec();
		},
		methods: {
			close() {
				this.show=false
			    this.setAShow(true)
			},
			getAttrList(id,type){
				getAttrList({productId:id,type}).then(res=>{
					console.log("shangp",res);
					this.AttrList = res.data
					if(this.AttrList!=[]){
						this.show = true
						this.setAShow(false)
					}
				})
			},
			addCart(cartNum, unique) {
				
				if (!this.productInfo.id) uni.showToast({
					title: "商品不存在",
					icon: 'none'
				})
				addCart({
					num:cartNum,
					productId:this.params.id,
					isBuy: 0,
					unique: unique,
					pingId: this.pingId,
					pingUserId: this.pingUserId,
					isPingOnly: this.isPingOnly,
					killProductId:this.killProductId
				}).then(res => {
					
					uni.showToast({
						title: "加入购物车成功",
						icon: 'none'
					})						
					countCart().then(res => {
					    if(res.code){
							that.getCun(res.data)
						}
						
					})	  
				})				
				
			},
			// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
		
			onTap() {
			let parans = {
				tag:this.$props.tag,
				index:this.$props.index
			}
				if(this.show){
					this.show=false
				}else{
					this.$emit("click", parans);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.integral {
		margin-left: 10rpx;
		color: #000;
		font-size: 22rpx;
	}

	.image {
		border-radius: 15rpx 15rpx 0 0;
	}

	.sales {
		color: #a5a5a5;
		font-size: 26rpx;
		line-height: 40rpx;
	}

	.text {
		background-color: $theme-color;
		font-size: 26rpx;
		padding: 5rpx 10rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
		color: #5e5e5e;
		line-height: 40rpx;
		margin-top: 10rpx;
	}

	.waterfall-item {
		padding: 0rpx;
		background-color: #fff;
		border-radius: 15rpx;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;

		image {
			display: block;
			width: 100%;
			// 默认设置一个图片的大约值
			height: 350rpx;
		}

		.content {
			padding: 10rpx 20rpx;
			background-color: #fff;
			border-radius: 0 0 20rpx 20rpx;

			.money {
				color: #fa3534;
				margin-top: 8rpx;
			}

			.label {
				background-color: #fa3534;
				color: #fff;
				font-size: 20rpx;
				padding: 4rpx 16rpx;
				border-radius: 20rpx;
				display: inline;

			}

			.shop-name {
				font-size: 20rpx;
				color: #999;
			}
		}
	}
</style>
